.app-container{
  padding: 20px;
  box-sizing: border-box;
  height: 100%;
  .header{
    //width: 95%;
    //height: 100%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    .main{
      width: 462px;
      height: auto;
      background: linear-gradient(-36deg, #005384, #001CC7);
      //opacity: 0.9;
      border-radius: 10px;
    }
    .left-line{
      width: 61px;
      height: 386px;
      background: linear-gradient(-36deg, #54BDFC, #1F3FFF);
      opacity: 0.5;
      border-radius: 10px;
      position: absolute;
      left: 1%;
      .center{
        width: 20px;
        height: 20px;
        position: absolute;
        top: 18%;
        left: 110%;
        margin-top: -50px;
        margin-left: -50px;
        border: 1px solid red;
      }
    }
    .main-left{
      //width: 340px;
      height: 33px;
      background: linear-gradient(-36deg, #67CDE4, #0F9BD8);
      //opacity: 0.5;
      border-radius: 5px;
      margin: 28px 34px 204px 34px;
      .title{
        display: inline-block;
        width: 73px;
        height: 16px;
        font-size: 13px;
        letter-spacing: 2px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        margin: 9px 252px 9px 15px;
      }
      .select{
        border-radius: 13px;
        margin: 22px 39px 300px 229px;
        .check{
          //width: 90%;
          height: 26px;
          margin: 0 auto;
          display: flex;
          line-height: 27px;
          justify-content: space-between;
          background: linear-gradient(-36deg, #005384, #001CC7);
          border-radius: 10px;
          .check-left{
            width: 37px;
            height: 11px;
            font-size: 14px;
            color: #FFFFFF;
            font-family: Microsoft YaHei;
            font-weight: 400;
            //color: #FFFFFF;
          }
          .check-right{
            width:0;
            height:0;
            border-right:10px solid transparent;
            border-left:10px solid transparent;
            border-top:10px solid #FFFFFF;
            margin: 9px 8px 0 0;
          }
        }
      }
      .Totalpopulation{
        position: relative;
        //width: 341px;
        height: 150px;
        margin-left: -215px;
        //background: url("~@/assets/circle.png") no-repeat center;
        //background-position: 43% 50%;
        .outer{
          display: flex;
          //align-items: center;
          flex-wrap: wrap; 			  // 多行显示
          align-content: center;
          justify-content: space-between;
          width: 100%;
          height: auto;
          .inner{
            width: 34%;
            //line-height: 15px;
            //height: 40%;
            //margin-bottom: 98px;
            display: inline-block;
            .title{
              font-size: 8px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #FFFFFF;
              text-align: right;
              width: 120px;
            }
            .title1{
              font-size: 8px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #FFFFFF;
              text-align: left;
            }
          }
        }
        .animate{
          display: flex;
          justify-content: space-between;
          align-content: center;
          .touxiang{
            position: absolute;
            left: 26%;
            top: -7%;
            animation: rotate 10s infinite linear;
            -webkit-animation: rotate 10s infinite linear;
            -moz-animation: rotate 10s infinite linear;
            -o-animation: rotate 10s infinite linear;
          }
          .center{
            position: absolute;
            left: 36%;
            top: -7%;
          }
        }
        @keyframes rotate {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }

        @-webkit-keyframes rotate {
          from {
            -webkit-transform: rotate(0deg);
          }
          to {
            -webkit-transform: rotate(360deg);
          }
        }

        @-moz-keyframes rotate {
          from {
            -moz-transform: rotate(0deg);
          }
          to {
            -moz-transform: rotate(360deg);
          }
        }

        @-ms-keyframes rotate {
          from {
            -ms-transform: rotate(0deg);
          }
          to {
            -ms-transform: rotate(360deg);
          }
        }

        @-o-keyframes rotate {
          from {
            -o-transform: rotate(0deg);
          }
          to {
            -o-transform: rotate(360deg);
          }
        }
        .center{
          width:100px;
          height:100px;
          position:absolute;
          top: 24%;
          left: 36%;
          //margin-top:-100px;
          //margin-left:-100px;
          //line-height: 100px;
          .title{
            font-size: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;
            text-align: center;
          }
        }
      }
    }
    .main-middle{
      //width: 340px;
      height: 33px;
      background: linear-gradient(-36deg, #67CDE4, #0F9BD8);
      //opacity: 0.5;
      border-radius: 5px;
      margin: 28px 34px 326px 34px;
      .title{
        display: inline-block;
        width: 78px;
        height: 16px;
        font-size: 13px;
        letter-spacing: 2px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        margin: 9px 252px 9px 15px;
      }
      .list{
        width: 95%;
        margin: 0 auto;
        .select{
          margin-top: 36px;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          align-content: center;
          justify-content: space-between;
          //width: 95%;
          .line{
            width: 45%;
            height: 40%;
            line-height: 30px;
            display: inline-block;
            .all-select{
              display: flex;
              justify-content: space-between;
              img{
                vertical-align: middle;
              }
              li{
                display: inline-block;
                p{
                  font-size: 14px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #FFFFFF;
                }
              }
            }
          }
        }
      }
      .progress{
        width: 100%;
        height: 14px;
        .speed{
          //line-height: 30px;
          .title_1{
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FF9600;
          }
          .title_2{
            font-size: 14px;

            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #00FF90;
          }
          .title_3{
            font-size: 14px;

            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #00D2FF;
          }
        }
      }
      ::v-deep .el-progress__text{
        color: #FFFFFF;
        font-size: 14px;
        }
      ::v-deep .el-progress-bar{
        width: 90%;
      }
    }
    .main-nav{
      //width: 340px;
      height: 33px;
      background: linear-gradient(-36deg, #67CDE4, #0F9BD8);
      //opacity: 0.5;
      border-radius: 5px;
      margin: 28px 34px 220px 34px;
      .title{
        display: inline-block;
        width: 78px;
        height: 16px;
        font-size: 13px;
        letter-spacing: 2px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        margin: 9px 252px 9px 15px;
      }
      .type{
        width: 95%;
        margin: 0 auto;
        .list{
          width: 95%;
          display: flex;
          justify-content: space-between;
          margin-top: 26px;
          margin-bottom: 15px;
          li{
            display: inline-block;
            p{
              font-size: 18px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #FFFFFF;
            }
            .data{
              margin-top: 19px;
              text-align: left;
            }
            .data_1{
              margin-top: 19px;
              text-align: center;
            }
          }
        }
        .outer {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          align-content: center;
          justify-content: space-between;
          width: 95%;
          height: 100px;
          text-align: center;
          .inner{
            width: 45%;
            height: 40%;
            //line-height: 30px;
            display: inline-block;
            img{
              width: 21px;
              height: 21px;
              vertical-align: middle;
            }
            .kunlun_name{
              width: 55px;
              height: 14px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #FFFFFF;
              margin: 0 31px 0 9px;
            }
            .kunlun_number{
              width: 14px;
              height: 11px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #FFFFFF;
            }
          }
        }
      }
    }
    .main-data{
      //width: 340px;
      height: 33px;
      margin: 28px 34px 100px 34px;
      .title{
        display: inline-block;
        width: 78px;
        height: 16px;
        font-size: 13px;
        letter-spacing: 2px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        margin: 9px 252px 9px 15px;
      }
      .type{
        width: 95%;
        margin: 0 auto;
        .list{
          width: 95%;
          display: flex;
          justify-content: space-between;
          margin-top: 15px;
          margin-bottom: 31px;
          li{
            display: inline-block;
            p{
              font-size: 18px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #FFFFFF;
            }
            .data{
              margin-top: 19px;
              text-align: left;
            }
            .data_1{
              margin-top: 19px;
              text-align: center;
            }
          }
        }
      }
    }
    .main-right{
      //width: 340px;
      height: 360px;
      margin:  0 auto;
      //background: url("~@/assets/bglogo.png") no-repeat center;
      //opacity: 0.5;
      border-radius: 5px;
      //margin: 28px 34px 200px 34px;
      .center{
        //width: 341px;
        height: 254px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url("~@/assets/circle1.png") no-repeat center;
        .main-center{
          .center_1{
            width: 66px;
            height: 28px;
            font-size: 36px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #B3CEFF;
            margin: 0 auto;
            margin-top: 15px;
            margin-bottom: 15px;
          }
          .center_2{
            margin-top: 16px;
            width: 100px;
            height: 32px;
            border: 1px solid #01A0FE;
            //opacity: 0.5;
            border-radius: 16px;
            .center_2_middle{
              width: 79px;
              margin: 0 auto;
              height: 13px;
              line-height: 33px;
              font-size: 12px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #B3CEFF;
              //opacity: 0.5;
            }
          }
          .center_3{
            width: 69px;
            height: 13px;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #B3CEFF;
            //opacity: 0.5;
            margin: 0 auto;
            margin-top: 31px;
          }
        }
      }
      .data-center{
        width: 341px;
        margin: 0 auto;
        .list{
          width: 421px;
          //display: flex;
          //justify-content: space-around;
          //position: fixed;
          //right: 50%;
          li{
            display: inline-block;
            img{
              vertical-align: middle;
              //width: 55px;
              //height: 56px;
            }
            .Statistics{
              width: 72px;
              height: 60px;
              background: #002B6C;
              border-radius: 10px;
              float: right;
              .value{
                text-align: center;
                font-size: 18px;
                font-weight: bold;
                color: #B3CEFF;
              }
              .label{
                text-align: center;
                font-size: 10px;
                color: #B3CEFF;
              }
            }
          }
        }
      }
    }
    .main-Completion{
      //width: 340px;
      height: 33px;
      background: linear-gradient(-36deg, #67CDE4, #0F9BD8);
      //opacity: 0.5;
      border-radius: 5px;
      margin: 0 34px 250px 34px;
      //margin: 300px 34px 200px 34px;
      .title{
        display: inline-block;
        width: 150px;
        height: 16px;
        font-size: 13px;
        letter-spacing: 2px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        margin: 9px 252px 9px 15px;
      }
      .myChart{
        margin-top: 35px;
      }
    }
    .main-bottom{
      //width: 340px;
      height: 33px;
      background: linear-gradient(-36deg, #67CDE4, #0F9BD8);
      //opacity: 0.5;
      border-radius: 5px;
      margin: 0 34px 200px 34px;
      .title{
        display: inline-block;
        width: 78px;
        height: 16px;
        font-size: 13px;
        letter-spacing: 2px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        margin: 9px 252px 9px 15px;
      }
      .select_1{
        width: 341px;
        margin: 0 auto;
        .list{
          display: flex;
          justify-content: space-around;
          margin-top: 44px;
          position: relative;
          li{
            display: inline-block;
            .imgae{
              width: 155px;
              height: 155px;
              animation: rotate 10s infinite linear;
              -webkit-animation: rotate 10s infinite linear;
              -moz-animation: rotate 10s infinite linear;
              -o-animation: rotate 10s infinite linear;
            }
            .time{
              position: absolute;
              left: 6%;
              top: 25%;
            }
            @keyframes rotate {
              from {
                transform: rotate(0deg);
              }
              to {
                transform: rotate(360deg);
              }
            }

            @-webkit-keyframes rotate {
              from {
                -webkit-transform: rotate(0deg);
              }
              to {
                -webkit-transform: rotate(360deg);
              }
            }

            @-moz-keyframes rotate {
              from {
                -moz-transform: rotate(0deg);
              }
              to {
                -moz-transform: rotate(360deg);
              }
            }

            @-ms-keyframes rotate {
              from {
                -ms-transform: rotate(0deg);
              }
              to {
                -ms-transform: rotate(360deg);
              }
            }
            .card-name{
              width: 92px;
              height: 12px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #B3CEFF;
              margin-left: 33px;
              margin-bottom: 21px;
              span{
                margin-left: 10px;
              }
            }
            .card-mechanism{
              width: 137px;
              height: 15px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #B3CEFF;
              margin-left: 33px;
              margin-bottom: 20px;
              span{
                margin-left: 10px;
              }
            }
            .card-temperature{
              width: 94px;
              height: 14px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #B3CEFF;
              margin-left: 33px;
              margin-bottom: 21px;
              span{
                margin-left: 10px;
              }
            }
            .card-time{
              width: 191px;
              height: 12px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #B3CEFF;
              margin-left: 33px;
              span{
                margin-left: 10px;
              }
            }
          }
          .line{
            width: 1px;
            height: 133px;
            border: 1px solid #01A0FE;
            margin-left: 10px;
          }
        }
      }
    }
  }

}

